import React from 'react'
// ===================================================================== global declare
const { $Lazy } = window
// ===================================================================== private template
const Page = $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs = $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		index:0,
		pages: [
			{ component:$Lazy.load(()=>import('./cpt/add-subtract-project')) },
			{ component:$Lazy.load(()=>import('./cpt/hospital')) },
			{ component:$Lazy.load(()=>import('./cpt/test-item')) },
		]
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [
		{ title:'加减做项目', 	status:0 },
		{ title:'医院', 		status:1 },
		{ title:'检测项', 		status:2 }
	]
	
	render(){
		const { index, pages } = this.state
		return (
			<>
				<Page>
					{/* 选项卡 */}
					<Tabs
						data={ this.tabs }
						onTabs = { (data, index) => {
							pages[+index].first = true
							this.setState({ index:+index, pages })
						}}
					/>
					{
						pages.map((v,i)=> v.first && <div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}><v.component /></div>)
					}
				</Page>
			</>
		)
	}
}

export default Index